<template>
  <view class="complaint-records-page">
    <!-- 统计信息 -->
    <view class="stats-section">
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-number">{{ stats.total }}</text>
          <text class="stat-label">总投诉</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ stats.pending }}</text>
          <text class="stat-label">待处理</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ stats.processing }}</text>
          <text class="stat-label">处理中</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ stats.completed }}</text>
          <text class="stat-label">已完成</text>
        </view>
      </view>
    </view>

    <!-- 筛选器 -->
    <view class="filter-section">
      <view class="filter-tabs">
        <view 
          v-for="tab in filterTabs" 
          :key="tab.value"
          class="filter-tab"
          :class="{ active: activeFilter === tab.value }"
          @click="setFilter(tab.value)"
        >
          <text class="tab-text">{{ tab.label }}</text>
          <text class="tab-count" v-if="tab.count > 0">({{ tab.count }})</text>
        </view>
      </view>
    </view>

    <!-- 投诉记录列表 -->
    <view class="records-section">
      <view v-if="filteredRecords.length > 0" class="records-list">
        <view 
          v-for="record in filteredRecords" 
          :key="record.id"
          class="record-item"
          @click="viewRecordDetail(record)"
        >
          <view class="record-header">
            <view class="record-type">
              <text class="type-icon">{{ getTypeIcon(record.type) }}</text>
              <text class="type-text">{{ record.typeText }}</text>
            </view>
            <view class="record-status">
              <text class="status-badge" :class="getStatusClass(record.status)">
                {{ record.statusText }}
              </text>
            </view>
          </view>

          <view class="record-content">
            <text class="record-title">{{ record.title }}</text>
            <text class="record-desc">{{ record.description }}</text>
          </view>

          <view class="record-footer">
            <view class="record-info">
              <text class="record-time">{{ record.createTime }}</text>
              <text class="record-number">#{{ record.number }}</text>
            </view>
            <view class="record-urgency">
              <text class="urgency-badge" :class="getUrgencyClass(record.urgency)">
                {{ record.urgencyText }}
              </text>
            </view>
          </view>

          <view class="record-actions">
            <button 
              class="action-btn btn-secondary"
              @click.stop="editRecord(record)"
              v-if="record.status === 'pending'"
            >
              编辑
            </button>
            <button 
              class="action-btn btn-primary"
              @click.stop="viewRecordDetail(record)"
            >
              查看详情
            </button>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-else class="empty-state">
        <view class="empty-icon">📝</view>
        <text class="empty-title">暂无投诉记录</text>
        <text class="empty-desc">您还没有提交过投诉，点击下方按钮开始</text>
        <button class="btn btn-primary" @click="goToSubmit">提交投诉</button>
      </view>
    </view>
  </view>
</template>

<script setup>
/**
 * 投诉记录页面
 * @author Wu.Liang
 * @date 2025-01-30
 * @version 1.0.0
 * @description 投诉建议记录页面，展示用户的投诉历史记录
 */

import { ref, reactive, computed, onMounted } from 'vue'

// 筛选标签
const filterTabs = ref([
  { value: 'all', label: '全部', count: 0 },
  { value: 'pending', label: '待处理', count: 0 },
  { value: 'processing', label: '处理中', count: 0 },
  { value: 'completed', label: '已完成', count: 0 }
])

// 当前选中的筛选器
const activeFilter = ref('all')

// 统计数据
const stats = reactive({
  total: 0,
  pending: 0,
  processing: 0,
  completed: 0
})

// 投诉记录数据
const complaintRecords = ref([
  {
    id: 1,
    number: 'TS20250130001',
    title: '小区路灯不亮',
    description: '小区内多个路灯不亮，影响夜间出行安全，希望尽快修复',
    type: 'facility',
    typeText: '设施问题',
    urgency: '2',
    urgencyText: '紧急',
    status: 'pending',
    statusText: '待处理',
    createTime: '2025-01-30 14:30',
    location: '小区主干道',
    phone: '138****1234',
    images: []
  },
  {
    id: 2,
    number: 'TS20250129001',
    title: '电梯故障',
    description: '3号楼2单元电梯经常故障，有时会卡在中间楼层，存在安全隐患',
    type: 'facility',
    typeText: '设施问题',
    urgency: '3',
    urgencyText: '特急',
    status: 'processing',
    statusText: '处理中',
    createTime: '2025-01-29 09:15',
    location: '3号楼2单元',
    phone: '138****1234',
    images: []
  },
  {
    id: 3,
    number: 'TS20250128001',
    title: '噪音扰民',
    description: '楼下装修噪音太大，影响正常休息，希望协调施工时间',
    type: 'noise',
    typeText: '噪音问题',
    urgency: '1',
    urgencyText: '一般',
    status: 'completed',
    statusText: '已完成',
    createTime: '2025-01-28 16:45',
    location: '2号楼1单元',
    phone: '138****1234',
    images: []
  }
])

// 根据筛选器过滤记录
const filteredRecords = computed(() => {
  if (activeFilter.value === 'all') {
    return complaintRecords.value
  }
  return complaintRecords.value.filter(record => record.status === activeFilter.value)
})

// 设置筛选器
const setFilter = (filter) => {
  activeFilter.value = filter
}

// 获取类型图标
const getTypeIcon = (type) => {
  const iconMap = {
    'facility': '🏠',
    'security': '🛡️',
    'environment': '🌳',
    'noise': '🔊',
    'service': '👥',
    'other': '❓'
  }
  return iconMap[type] || '❓'
}

// 获取状态样式类
const getStatusClass = (status) => {
  const classMap = {
    'pending': 'status-pending',
    'processing': 'status-processing',
    'completed': 'status-completed'
  }
  return classMap[status] || 'status-pending'
}

// 获取紧急程度样式类
const getUrgencyClass = (urgency) => {
  const classMap = {
    '1': 'urgency-low',
    '2': 'urgency-medium',
    '3': 'urgency-high'
  }
  return classMap[urgency] || 'urgency-low'
}

// 查看记录详情
const viewRecordDetail = (record) => {
  uni.navigateTo({
    url: `/pages/complaint/detail?id=${record.id}`
  })
}

// 编辑记录
const editRecord = (record) => {
  uni.showModal({
    title: '编辑投诉',
    content: '编辑功能正在开发中，敬请期待',
    showCancel: false,
    confirmText: '知道了'
  })
}

// 跳转到提交页面
const goToSubmit = () => {
  uni.navigateTo({
    url: '/pages/complaint/submit'
  })
}

// 更新统计数据
const updateStats = () => {
  const total = complaintRecords.value.length
  const pending = complaintRecords.value.filter(r => r.status === 'pending').length
  const processing = complaintRecords.value.filter(r => r.status === 'processing').length
  const completed = complaintRecords.value.filter(r => r.status === 'completed').length

  stats.total = total
  stats.pending = pending
  stats.processing = processing
  stats.completed = completed

  // 更新筛选标签计数
  filterTabs.value[0].count = total
  filterTabs.value[1].count = pending
  filterTabs.value[2].count = processing
  filterTabs.value[3].count = completed
}

// 页面加载
onMounted(() => {
  console.log('投诉记录页面已加载')
  
  // 从本地存储加载数据（演示用）
  const localComplaints = uni.getStorageSync('complaints')
  if (localComplaints && localComplaints.length > 0) {
    complaintRecords.value.unshift(...localComplaints)
  }
  
  updateStats()
})
</script>

<style scoped>
.complaint-records-page {
  min-height: 100vh;
  background: #f8f9fa;
  padding-bottom: 40rpx;
}

.stats-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #2196f3;
  margin-bottom: 10rpx;
}

.stat-label {
  display: block;
  font-size: 24rpx;
  color: #666;
}

.filter-section {
  background: #fff;
  margin: 0 30rpx 30rpx;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.filter-tabs {
  display: flex;
  gap: 20rpx;
}

.filter-tab {
  flex: 1;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  text-align: center;
  transition: all 0.3s ease;
}

.filter-tab.active {
  background: #2196f3;
  color: #fff;
}

.tab-text {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 5rpx;
}

.tab-count {
  display: block;
  font-size: 22rpx;
  opacity: 0.8;
}

.records-section {
  margin: 0 30rpx;
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.record-item {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.record-type {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.type-icon {
  font-size: 32rpx;
}

.type-text {
  font-size: 26rpx;
  color: #666;
}

.status-badge {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: bold;
}

.status-pending {
  background: #fff3e0;
  color: #ff9800;
}

.status-processing {
  background: #e3f2fd;
  color: #2196f3;
}

.status-completed {
  background: #e8f5e8;
  color: #4caf50;
}

.record-content {
  margin-bottom: 20rpx;
}

.record-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.record-desc {
  display: block;
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.record-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.record-info {
  display: flex;
  flex-direction: column;
  gap: 5rpx;
}

.record-time {
  font-size: 24rpx;
  color: #999;
}

.record-number {
  font-size: 24rpx;
  color: #666;
  font-family: monospace;
}

.urgency-badge {
  padding: 6rpx 12rpx;
  border-radius: 16rpx;
  font-size: 20rpx;
  font-weight: bold;
}

.urgency-low {
  background: #e8f5e8;
  color: #4caf50;
}

.urgency-medium {
  background: #fff3e0;
  color: #ff9800;
}

.urgency-high {
  background: #ffebee;
  color: #f44336;
}

.record-actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  flex: 1;
  padding: 20rpx;
  border-radius: 12rpx;
  font-size: 26rpx;
  font-weight: bold;
  border: none;
  text-align: center;
}

.btn-primary {
  background: #2196f3;
  color: #fff;
}

.btn-secondary {
  background: #f8f9fa;
  color: #666;
  border: 2rpx solid #e9ecef;
}

.empty-state {
  background: #fff;
  border-radius: 20rpx;
  padding: 80rpx 40rpx;
  text-align: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.empty-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.empty-desc {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 40rpx;
  line-height: 1.5;
}

.btn {
  padding: 30rpx 60rpx;
  border-radius: 12rpx;
  font-size: 30rpx;
  font-weight: bold;
  border: none;
  text-align: center;
}
</style>
